<!DOCTYPE HTML>
<html lang="en">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title>Xero | Premium XHTML &amp; CSS Template By TahaH Studio</title>
<meta name="description" content="A premium (X)HTML &amp; CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen">
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<!--
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/yellow.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/cream.css" media="screen">
-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/xero.forms.js"></script>
<script type="text/javascript" src="js/xero.js"></script>

<script type="text/javascript">
	// Auhtor bip tooltip options
	$(document).ready(function(){	
		$("#author_avatar").tooltip({
			effect:			'fade',
			fadeInSpeed:	300,
			fadeOutSpeed:	250,
			tip:			'.bio_tooltip',
			relative:		true,
			position:		'bottom center',
			offset:			[-7, 75],
			delay:			500
		});
	});
</script>
</head>
<body><!-- add grunge class for grunge style -->
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> <a href="index.html">Xero HTML &amp; CSS Template</a> </h1>
			<!-- end logo -->
			
			<ul id="nav">
				<li><a href="index.html"><span>Home</span></a></li>
				<li><a href="#"><span>Pages</span></a>
					<ul class="subnav">
						<li><a href="html-elements.html">HTML Elements Test</a></li>
						<li><a href="full-width.html">Full Width</a></li>
						<li><a href="#">Pages Options</a>
							<ul class="subnav">
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="sidebar-right.html">Sidebar Right</a></li>
							</ul>
						</li>
						<li><a href="#">Dropdown</a>
							<ul class="subnav">
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a>
									<ul class="subnav">
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
									</ul>
									<!-- end 3rd sub navigation --> 
								</li>
							</ul>
							<!-- end 2nd sub navigation --> 
						</li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#" class="current"><span>Blog</span></a>
					<ul class="subnav">
						<li><a href="blog.html">Blog Page</a></li>
						<li><a href="single-post.html">Single Post</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Portfolio</span></a>
					<ul class="subnav">
						<li><a href="portfolio-1.html">Portfolio Style 1</a></li>
						<li><a href="portfolio-2.html">Portfolio Style 2</a></li>
						<li><a href="portfolio-3.html">Portfolio Style 3</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="contact.php"><span>Contact</span></a></li>
			</ul>
			<!-- end main navigation -->
			
			<div class="clear"></div>
			<!-- clears floted logo & nav -->
			
			<div id="page_title">
				<ul class="breadcrumb_nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Blog</a></li>
				</ul>
				<h1>Signle Post</h1>
			</div>
			<!-- end page title -->
		</div>
		<!-- end header (940px width) --> 
	</div>
	<!-- end header container (100% width) -->
	
	<div id="body_content">
		<div id="content" class="has_sidebar left">
		
			<div id="sgl_post">
				<div class="post_info_image">
					<ul class="post_info">
						<li><span class="comment_icon">24</span></li>
						<li><span class="date_icon">20 July 2010</span></li>
						<li><span class="author_icon">Taha Hesham</span></li>
					</ul>
					<!-- end post information -->
					
					<div class="post_image_container">
						<img src="images/singlepost_image.jpg" width="486" alt="Xero Theme" class="post_image">
						<!-- end post image -->
					</div>
					<!-- end post image container -->
				</div>
				<!-- end post information and image container -->
				
				<ul class="post_cats">
					<li><a href="#">Category 1</a> /</li>
					<li><a href="#">Category 2</a></li>
				</ul>
				<!-- end post categories -->
				
				<h2 class="post_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit.</h2>
				<!-- end post title -->

				<div class="post_content">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non tortor sed quam vulputate scelerisque in vitae nisi. Proin bibendum aliquam varius. Phasellus a nisl quis massa congue feugiat sed a orci. Maecenas ornare gravida metus, id sodales lorem molestie sed. Praesent ac commodo lorem. Nullam at nibh ligula, id ullamcorper sem. Donec nunc libero, viverra vitae venenatis in, tincidunt nec lorem. Vivamus sem lacus, commodo non viverra ut, faucibus in felis. Fusce at varius turpis. Donec nibh risus, interdum sit amet eleifend eget, convallis vel libero. Duis et quam id nulla blandit commodo. Integer nec orci diam. Vivamus nec mi est. Proin a nibh eget ipsum vehicula sollicitudin. Pellentesque sit amet felis dui.</p>

					<h3>A sub title</h3>
					<p>
						<a href="#" class="zoom alignright">
							<img src="images/post_thumb.jpg" alt="">
						</a>
					Suspendisse quam ipsum, congue ac rutrum sit amet, commodo eget magna. Aliquam hendrerit nisi in nisl volutpat blandit. Nam vehicula placerat nibh, ornare hendrerit turpis bibendum id. Aenean ut magna eu magna euismod ultricies a in sapien. Donec euismod blandit varius. Curabitur tincidunt condimentum ante in tincidunt.  Pellentesque ut lacinia nibh. Aliquam fringilla nisl in augue lacinia sollicitudin. Donec sodales lobortis lacus ut placerat. In a nulla sed dui bibendum faucibus. Vivamus cursus pretium metus id elementum. Curabitur sed odio at neque laoreet fermentum ac et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros orci, porttitor eget molestie quis, fringilla a nulla. Maecenas quis enim lacus. Nullam elit ligula, rutrum fringilla molestie id, cursus et elit. Praesent faucibus massa non erat rhoncus in bibendum augue posuere. Donec eleifend rhoncus sapien, non eleifend risus lacinia ut. Donec vel enim enim.</p>
				</div>
				<!-- end post content -->
				
				<div class="post_widgets">
					<div class="post_share">
						<h3>Share this Post</h3>
						<ul class="share_icons">
							<li><a href="#"><img width="38" src="images/icons/social_profiles/32/stumbleupon.png" alt=""></a></li>
							<li><a href="#"><img width="38" src="images/icons/social_profiles/32/facebook.png" alt=""></a></li>
							<li><a href="#"><img width="38" src="images/icons/social_profiles/32/delicious.png" alt=""></a></li>
							<li><a href="#"><img width="38" src="images/icons/social_profiles/32/twitter.png" alt=""></a></li>
						</ul>
					</div>
					<!-- end post share -->
					
					<div id="author_bio_container">
						<img src="images/global/avatar_small.png" id="author_avatar" alt="">
						<!-- end author avatar 40x40 -->
						
						<div id="author_bio">
							<h4 class="author_name">By taha hesham</h4>
							<!-- author name -->
							
							<p>Rollover the avatar to read this author's bio</p>
							<!-- author bio message -->
						</div>
						<!-- end author bio -->

						<div id="bio" class="bio_tooltip">
							<p class="noBottomMargin">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pretium lacinia. Sed aliquet, dolor a tincidunt sodales, lectus neque ultrices dolor, vitae faucibus massa elit a orci. Nam sit amet mauris at tellus blandit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
														
							<ul class="button_array">
								<li><a class="small_button" href="#">My Blog</a></li>
								<li><a class="small_button" href="#">My porfolio</a></li>
							</ul>
								
						</div>
						<!-- end actual author bio -->						
					</div>
					<!-- end author bio container -->
				</div>
				
				<div class="comments">
					<h2>3 Comments</h2>
					
					<ul id="comments_container">
						<li>
							<div class="comment_container">
								<a href="#" class="commentor_avatar"><img src="images/global/avatar_large.png" alt=""></a>
								<!-- end commentor avatar 80x80 -->
								
								<div class="comment">
									<ul class="comment_author_date">
										<li><h4 class="commentor_name">Taha Hesham</h4></li>
										<!-- end comment auhtor info -->
										
										<li><span class="posted_on">24 May, 2010 at 2:00 am</span></li>
										<!-- end comment date time -->
									</ul>
									<!-- end comment info -->
									
									<div class="comment_content">
										Suspendisse quam ipsum, congue ac rutrum sit amet, commodo eget magna. Aliquam hendrerit nisi in nisl volutpat blandit. Nam vehicula placerat nibh, ornare hendrerit turpis bibendum id. Aenean ut magna eu magna euismod ultricies a in sapien. Donec euismod blandit varius. Curabitur tincidunt condimentum ante in tincidunt.
									</div>
									<!-- end comment content -->
									
									<a href="#" class="reply_button">Reply</a>
									<!-- end reply button -->
								</div>
								<!-- end comment body -->
							</div>
							<!-- end single comment conmtainer -->
							
							<ul class="child_comments_container">
								<li>
									<div class="comment_container">
										<a href="#" class="commentor_avatar"><img src="images/global/avatar_mid.png" alt=""></a>
										<!-- end commentor avatar 50x50 -->
										
										<div class="comment">
											<ul class="comment_author_date">
												<li><h4 class="commentor_name">Taha Hesham</h4></li>
												<!-- end comment auhtor info -->
												
												<li><span class="posted_on">24 May, 2010 at 2:00 am</span></li>
												<!-- end comment date time -->
											</ul>
											<!-- end comment info -->
											
											<div class="comment_content">
												Suspendisse quam ipsum, congue ac rutrum sit amet, commodo eget magna. Aliquam hendrerit nisi in nisl volutpat blandit. Nam vehicula placerat nibh, ornare hendrerit turpis bibendum id. Aenean ut magna eu magna euismod ultricies a in sapien. Donec euismod blandit varius. Curabitur tincidunt condimentum ante in tincidunt.
											</div>
											<!-- end comment content -->
											
											<a href="#" class="reply_button">Reply</a>
											<!-- end reply button -->
										</div>
										<!-- end comment body -->
									</div>
									<!-- end single comment conmtainer -->
									
									<ul class="grandchild_comments_container">
										<li>
											<div class="comment_container">
												<a href="#" class="commentor_avatar"><img src="images/global/avatar_mid.png" alt=""></a>
												<!-- end commentor avatar 50x50 -->
												
												<div class="comment">
													<ul class="comment_author_date">
														<li><h4 class="commentor_name">Taha Hesham</h4></li>
														<!-- end comment auhtor info -->
														
														<li><span class="posted_on">24 May, 2010 at 2:00 am</span></li>
														<!-- end comment date time -->
													</ul>
													<!-- end comment info -->
													
													<div class="comment_content">
														Suspendisse quam ipsum, congue ac rutrum sit amet, commodo eget magna. Aliquam hendrerit nisi in nisl volutpat blandit. Nam vehicula placerat nibh, ornare hendrerit turpis bibendum id. Aenean ut magna eu magna euismod ultricies a in sapien. Donec euismod blandit varius. Curabitur tincidunt condimentum ante in tincidunt.
													</div>
													<!-- end comment content -->
													
													<a href="#" class="reply_button">Reply</a>
													<!-- end reply button -->
												</div>
												<!-- end comment body -->
											</div>
											<!-- end single comment conmtainer -->
										</li>
									</ul>
									<!-- end grand child comments container -->
								</li>
							</ul>
							<!-- end child comments container -->
						</li>
						<li>
							<div class="comment_container">
								<a href="#" class="commentor_avatar"><img src="images/global/avatar_large.png" alt=""></a>
								<!-- end commentor avatar 80x80 -->
								
								<div class="comment">
									<ul class="comment_author_date">
										<li><h4 class="commentor_name">Taha Hesham</h4></li>
										<!-- end comment auhtor info -->
										
										<li><span class="posted_on">24 May, 2010 at 2:00 am</span></li>
										<!-- end comment date time -->
									</ul>
									<!-- end comment info -->
									
									<div class="comment_content">
										Suspendisse quam ipsum, congue ac rutrum sit amet, commodo eget magna. Aliquam hendrerit nisi in nisl volutpat blandit. Nam vehicula placerat nibh, ornare hendrerit turpis bibendum id. Aenean ut magna eu magna euismod ultricies a in sapien. Donec euismod blandit varius. Curabitur tincidunt condimentum ante in tincidunt.
									</div>
									<!-- end comment content -->
									
									<a href="#" class="reply_button">Reply</a>
									<!-- end reply button -->
								</div>
								<!-- end comment body -->
							</div>
							<!-- end single comment conmtainer -->
						</li>
					</ul>
					<!-- end comments container -->

					<ul class="pagination">
						<li><a href="#" class="large_button">&laquo;</a></li>
						<li><a href="#" class="large_button current">1</a></li>
						<li><a href="#" class="large_button">2</a></li>
						<li><a href="#" class="large_button">&raquo;</a></li>
					</ul>
					<!-- end pagination -->
					
					
					<div id="comment_form_container">
						<h2>Post Your Comment</h2>
						<form action="" id="comment_form">
						
							<label for="comment_form_name" class="auto_clear">Name</label>
							<input type="text" name="comment_form_name" id="comment_form_name">
							
							<label for="comment_form_email" class="auto_clear">Email</label>
							<input type="text" name="comment_form_email" id="comment_form_email">
							
							<label for="comment_form_website" class="auto_clear">Website</label>
							<input type="text" name="comment_form_website" id="comment_form_website">
							
							<label for="comment_form_comment" class="auto_clear">Your Comment</label>
							<textarea name="comment_form_comment" id="comment_form_comment" cols="30" rows="10"></textarea>
							
							<input class="submit" type="submit" value="Add Comment" id="comment_form_submit" name="comment_form_submit">
						</form>
						<!-- end comment form -->
					</div>
					<!-- end comment form container -->
				</div>
				<!-- end comments -->
			</div>
			<!-- end sgl post -->
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="right">
		
			<form action="" id="search_widget">
				<label for="search_field" class="auto_clear">Search...</label>
				<!-- end auto clear label -->
				
				<input type="text" name="search_field" id="search_field">
				<!-- end search field -->
				
				<input type="submit" name="search_submit" id="search_submit" value="">
				<!-- end search submit -->
			</form>
			<!-- end search form -->
			
			<div class="inline_content_widget">
				<h3 class="widget_title">
					Text Widget
				</h3>
				<!-- end widget title -->
				
				<div class="widget_content">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac scelerisque nisi. Maecenas auctor tellus semper leo viverra ultricies. Vestibulum vel turpis non enim vulputate gravida at id urna. Proin eu fringilla nulla. Morbi rhoncus pellentesque elit eget dictum. Proin vestibulum iaculis pulvinar. Nam rhoncus velit quis elit sollicitudin tempus iaculis justo vestibulum. Aenean gravida mollis nisl ac posuere. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc feugiat fringilla metus.
				</div>
				<!-- end widget content --> 
			</div>
			<!-- end widget -->
			
			<div class="tabbed_widget">
				<ul class="widget_tabs">
					<li><a href="#tab1"><span>Inline Content</span></a></li>
					<li><a href="#tab2"><span>Categories</span></a></li>
				</ul>
				<!-- end tabs heads -->
				
				<div class="widget_tabs_content">
					<div class="tab_content">
						<h3>Just a Title</h3>
						<img src="images/content_widget.jpg" width="126" class="alignright" alt=""> Quisque sapien odio, malesuada vel hendrerit in, pellentesque vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi elementum vulputate porttitor. Fusce sed metus in nisi facilisis malesuada. Curabitur volutpat hendrerit enim, eget rutrum massa semper in. Sed tristique, augue sit amet aliquam pharetra.
					</div>
					<!-- end tab 1 content -->
					
					<div class="tab_content">
						<h3>Categories</h3>
						<ul>
							<li><a href="#">Web design</a></li>
							<li><a href="#">Branding</a></li>
							<li><a href="#">Some category</a></li>
							<li><a href="#">Another one</a></li>
							<li><a href="#">Final one</a></li>
						</ul>
					</div>
					<!-- end tab 2 content -->
				</div>
				<!-- end tabs content -->
			</div>
			<!-- end widget --> 
			
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			<ul class="copyright_info reset_style">
				<li><img src="images/xero_logos/footer_logo.png" alt="" id="footer_logo" class="reset_style center"></li>
				<li>A Theme By <a href="http://wizylabs.com">Wizy Labs</a>. Copyright &copy; 2010</li>
			</ul>
			<!-- end copyright info, copyright info can be changed as desired -->
			
			<div class="footer_nav_container">
				<ul class="footer_nav reset_style">
					<li><a href="#">Home</a> /</li>
					<li><a href="#">About</a> /</li>
					<li><a href="#">Advertise</a> /</li>
					<li><a href="#">Contact</a> /</li>
					<li><a href="#">Icons by IconDock</a></li>
				</ul>
				<!-- end footer nav -->
				
				<ul class="social_profiles reset_style">
					<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
					<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
					<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
					<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
					<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
				</ul>
				<!-- end social profiles nav -->
			</div>
		</div>
		<!-- end actual footer -->
	</div>
	<!-- end footer container -->
</div>
<!-- end wrapper -->
</body>
</html>